<template>
 <PanelComp title="实时影像">
    <template #content>
      <div id="realtime-image">
         <video-player :poster="poster" crossorigin="anonymous" :controls="true" :loop="true" :volume="0.6"
        :techOrder="['html5', 'flvjs']" autoplay="true" width="500px" height="300px" @mounted="handleMounted" />
      </div>
    </template>
  </PanelComp>
</template>

<script setup>
import { ref } from 'vue'
import { VideoPlayer } from '@videojs-player/vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import PanelComp from './PanelComp.vue'

const props = defineProps({
    src: {
        type: String,
        default: 'https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8'
    },
    videoType: {
        type: String,
        default: 'hls'
    }
})
const poster = ref('/src/assets/subway.jpeg')

const handleMounted = ({ player }) => {
    if (props.videoType === 'hls') {
        console.log('HLS Live player mounted', player)
        player.src(props.src)
    } else if (props.videoType === 'flv') {
        // flv.js runs only in the browser environment and does an asynchronous processing for SSR prerender.
        import('/src/cesiumTools/flvjs-tech.js').then(({ FlvJsTech }) => {
            console.log(FlvJsTech);
            videojs.registerTech('Flvjs', FlvJsTech)
            player.src(props.src)
        })
    }
}
</script>

<style scoped>

</style>